<template>
  <view>
    <view class="main">
      <view class="video_info">
        <!-- 音乐 -->
        <video :src="video.videoUrl"></video>

        <view class="video_bar">
          <!-- 标题 -->
          <view class="video_name">
            <text>【{{video.title}}】</text>
          </view>
          <!-- 图 -->
          <image :src="video.imgUrl" class="cover autoRotate" />
          <!-- 小标题 -->
          <view class="video_detail">
            <text class="author">简介</text>
            <text class="count">{{video.desc}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

</template>
<script>
export default {
  name: "HmRowVideoCard",
  data() {
    return {
      id:0,
      video:{}
     
    };
  },
  methods: {
    getVideos(){
      this.request({
        url: this.apiServer + "/video/findVideoById?id="+this.id
      }).then(res=>{
        console.log(res);
        this.video = res.data;
      })
    }
  },
  onLoad(option) {
    this.id = option.id;
    this.getVideos();
  }
};
</script>
<style>
.main{
  padding: 10rpx;
  color: #666;
}
.video_info video{
  padding: 40rpx;
  display: flex;
  width: 100vw;
  border-radius: 10rpx;
} 


.video_bar image{
  border-radius: 50rpx;
  width:50rpx;
  height:50rpx;
  /* justify-content: space-around; */
  float: right;
}

.video_name{
  color:black;
  display: flex;
  justify-content: space-between;
  font-size: 45rpx;
  margin: 0 auto;
  margin-top: 10rpx;
  
}

.video_detail .author{
  color: #000;
  font-size: 30rpx;
  border-left: 7rpx solid red;
  padding: 10rpx;

}

.video_detail .count{
  color: gray;
  font-size: 20rpx;
  margin: 5rpx;
}

.video_detail .album{
  color: salmon;
  font-size: 20rpx;
  margin: 5rpx;
}


.box {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 332px;
  height: 82px;
  padding: 5px 10px 5px 10px;
  margin-top: 20upx;
}

.video {
  width: 150px;
  height: 82px;
}

.side {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  height: 82px;
}

.title {
  width: 172px;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 21px;
  white-space: pre-wrap;
  color: #131f3c;
  font-family: Helvetica;
  font-size: 15px;
}

.desc {
  opacity: 0.9;
  margin-top: 11px;
  line-height: 14px;
  white-space: pre;
  color: #8491b0;
  font-family: Helvetica;
  font-size: 12px;
}
</style>
